// 登录页面

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

/// 无状态页面 显示样式 由外部控制
class LoginPageStatic extends StatelessWidget {
  const LoginPageStatic({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const LoginPage(),
      theme: ThemeData.light(),
    );
  }
}

/// 有状态页面 显示样式 自身控制(内部是一个 State)
class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<StatefulWidget> createState() => LoginPageState();
}

/// 页面状态 通过 setState 显示
class LoginPageState extends State<LoginPage> {
  show() {
    setState(() {});
  }

  /// 状态栏
  stateBar(double top) {
    return Container(
      padding: EdgeInsets.only(top: top),
    );
  }

  /// 顶部标题栏
  toolbar() {
    return Row(
      children: [
        GestureDetector(
          child: const Text("返回"),
          onTap: () {
            SystemNavigator.pop();
          },
        ),
        Expanded(
          flex: 1,
          child: Container(),
        ),
        GestureDetector(
          onTap: () {
            changeType();
          },
          child: Text(_strLoginType),
        ),
      ],
    );
  }

  // 登录方式 ,默认 0 验证码登录 1 账号密码登录
  int loginType = 1;

  String _strLoginType = "验证码登录";

  /// 显示文字 点击后切换的模式
  typeText() {
    _strLoginType = loginType == 0 ? "密码登录" : "验证码登录";
  }

  changeType() {
    print("切换登录方式");
    setState(() {
      if (loginType == 1) {
        loginType = 0;
      } else {
        loginType = 1;
      }
      typeText();
      content();
    });
  }

  /// 验证码登录
  loginByVerify() {
    return IntrinsicHeight(
      child: Container(
        height: double.infinity,
        color: const Color.fromARGB(255, 240, 239, 239),
        child: const Column(
          children: [
            Row(
              children: [Text("手机号")],
            ),
            Row(
              children: [Text("验证码")],
            )
          ],
        ),
      ),
    );
  }

  /// 账号密码登录
  loginByPassword() {
    return IntrinsicHeight(
      child: Container(
        height: double.infinity,
        color: const Color.fromARGB(255, 170, 168, 168),
        child: const Column(
          children: [
            Row(
              children: [Text("用户名")],
            ),
            Row(
              children: [Text("密码")],
            )
          ],
        ),
      ),
    );
  }

  /// 登录区域
  content() {
    if (loginType == 0) {
      return loginByVerify();
    } else {
      return loginByPassword();
    }
  }

  /// 三方登录区域
  otherLogin() {
    return Column(
      children: [
        const Center(
          child: Text(
            "- 更多登录方式 -",
            style: TextStyle(color: Colors.black38),
          ),
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              flex: 1,
              child: Container(),
            ),
            Image.asset(
              "res/icon/icon_wx.png",
              width: 40,
              height: 40,
            ),
            Image.asset(
              "res/icon/icon_wx_app.png",
              width: 40,
              height: 40,
            ),
            Expanded(
              flex: 1,
              child: Container(),
            ),
          ],
        ),
      ],
    );
  }

  /// 整个页面
  page(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [
          stateBar(MediaQuery.of(context).padding.top),
          toolbar(),
          Expanded(
            flex: 1,
            child: content(),
          ),
          Expanded(
            flex: 1,
            child: Container(),
          ),
          otherLogin(),
          Container(
            padding:
                EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom),
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return page(context);
  }
}
